<template>
  <view class="cu-card dynamic no-card" v-if="item.id">
			<view class="cu-item shadow">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar round lg" :style="'background-image:url('+item.user.avatarUrl+');'"></view>
						<view class="content flex-sub">
							<view>{{item.user.nickname}}</view>
							<view class="text-gray text-sm flex justify-between">
								{{item.addtime}}
							</view>
						</view>
					</view>
				</view>
				<view class="text-content">
					<!-- <text class="margin-lr-xs"></text> -->
					<text class='bg-green margin-right-xs padding-xs' v-if="item.vote_data.choice==2">多选</text>
					<text class='bg-blue margin-right-xs padding-xs' v-if="item.vote_data.choice==1">单选</text>
					{{item.title}} 
				</view>
				
				 <view class="padding-sm  margin-top-20 text-content">投票截止 {{item.vote_data.end_date}}</view>

				<view class="grid flex-sub padding-lr col-1" >
					<image v-for="(pic,index) in item.pics" :key="index" style="width: 100%; margin-top: 5rpx;"  :src="pic+'?imageView2/2/w/1000'" mode="widthFix"></image>
				</view>
				
				<view class="text-gray text-sm text-right padding">
					<text class="margin-lr-xs">投票</text> {{item.vote_count}}
					<text class="margin-lr-xs">评论</text>  {{item.comment_count?item.comment_count:0}}
					<text class="margin-lr-xs">点赞</text> {{item.good_count?item.good_count:0}}
				</view>

				 
				<view class="topic-content">
				<rich-text  :nodes="topicContent"></rich-text>
				</view>
				<view class="line"></view>
				
	<!-- 投票选项 -->			
    <view class="options">
 
      <view class='options-item' :key="idx"  v-for="(vote,idx) in item.vote_data.options"  >
        <view class="options-content" @click="dovote" :data-id="vote.id">
        <view class='options-title'>{{vote.text}}<text v-if="vote.choose" >✔</text></view>
        <view class='options-info'>{{vote.count}}票 {{vote.percentage}}%</view>
        <view class='clear'></view>
        </view>
         <view class="options-line" :style='"width:"+vote.percentage+"%"'></view>
          <view class="options-user-list images">
			<image :src='user.avatarUrl' :key="idx"  v-for="(user,idthumb) in vote.userList" ></image>
          </view>

      </view>
    </view>
	<!-- 投票选项 -->		
				
				 

				<view class="cu-list menu-avatar comment solids-top" :key="index"  v-for="(comment,index) in commentList" >
					<view class="cu-item">
						<view class="cu-avatar round" :style="'background-image:url('+comment.avatarUrl+';'"></view>
						<view class="content">
							<view class="text-grey">{{comment.nickname}}</view>
							<view class="text-gray text-content text-df">
								{{comment.content}}
							</view>
							<view v-if="comment.comment" class="bg-grey padding-sm radius margin-top-sm  text-sm">
								<view class="flex">
									<view>{{comment.comment.user.nickname}}：</view>
									<view class="flex-sub">{{comment.comment.content}}</view>
								</view>
							</view>
							<view class="margin-top-sm flex justify-between">
								<view class="text-gray text-df">{{comment.time_tran}}</view>
								<view @click="addComment" :data-comment_id="comment.id">
									<!-- <text class="cuIcon-appreciatefill text-red"></text> -->
									<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
								</view>
							</view>
						</view>
					</view>

					
				</view>
			</view>
			<view style="height: 120upx;"></view>			
			<!-- <view class="fixed-btn" >
				 <view class="cu-bar bg-white tabbar border shop">
				<button class="action" open-type="contact">
					<view class="cuIcon-service text-green">
						<view class="cu-tag badge"></view>
					</view>
					客服
				</button>
				<view class="action" @click="add_goods">
					<view class="cuIcon-appreciatefill" :class="item.thumb_up_ed?'text-red':''">
						<view class="cu-tag badge" v-if="item.good_count>0">{{item.good_count}}</view>
					</view>
					{{good_text}}
				</view>
			 
				<view class="bg-blue submit" @click="jumpToComment">评论</view>
				
			</view>
			</view> -->
			
		</view>
	 
</template>


<script>
	import beeApp from '../../beeApp.js'
	import parseHtml from '../../util/html-parser.js'
	export default {
		data() {
			return {
				   item: {
                        user: {
                          nickname:''
                        },
						vote_data:{
							
						},
						title:'',
						addtime:''
						
                    },
					  good_text: "点赞",
					isCard: false,
					topid_id:0,
                    goodlist: [],
                    good_text: "点赞",
                    publish_text: "确认提交",
                    placeholder: "",
                    commentList: [],
                    pager: {},
                    name: "moduleTopic",
                    page: 1,
                    community_id:0,
                    user_info: {  tenement_type:[]},
                    event: {},
					topicContent:'',
			}
		},
		onLoad(option) {
          // beeApp.alert("yiqwyei");
		  
		  this.topid_id = option.id;
		  beeApp.getUserInfo((userInfo)=>{
			  this.userInfo = userInfo;
			  this.fetchData();
		  })
		},
		onShow:function(){
			var reload = beeApp.getPageData("pages/topic/detail","reload");
			if(reload==1){
				beeApp.setPageData("pages/topic/detail",{reload:0});
				this.fetchData();
			}
		},
		onReachBottom() {
			this.loadComment();
		},
		onPullDownRefresh() { 
			this.fetchData();
			uni.stopPullDownRefresh();
		},
		methods: {
			 fetchData: function() {
                    var _this = this;
                    // this.placeholder = this.$route.params.placeholder;
                    beeApp.api("sns/topic/detail", {
                        id: this.topid_id,
						 fields: 'id,user_id,cate_id,cover,title,addtime,desc,content,dateline,lastupdate,pid,pid2,type,status,pics,user,group,statistics.comment_count,statistics.join_count,statistics.hit_count,statistics.good_count,video_url,thumb_up_ed,videoKey,imageKeys,extraData,vote_data,vote_count'
                    }, function(res) {
                        if (res.code != 200) {
                            beeApp.alert(res.msg);
                            return;
                        }
                        var data = res.data;
                        if (data && data.id) {
                            _this.item = data;
                            _this.good_text = data.has_good ? "已赞" : "点赞";
                            _this.community_id = data.shop_id;
                        }
						if(res.data.content){
							var content = res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
						   _this.topicContent =parseHtml(content);
						}
						
                    });
                    this.loadComment(1);
                     
                },
			addComment:function(e){
				var comment_id = e.currentTarget.dataset.comment_id;
				this.jumpToComment(comment_id);
			},	
			add_goods:function(){
                   
                    var vm = this;
                    var that = this;
                    var item = this.item;
                    
                   
                    beeApp.api("sns/topic/thumb_up",{
						topic_id:this.item.id
					} ,function(data) {
                        if (data.error > 0) {
                            return;
                        }
                        //当前页点赞数变化
                        if (data.data.type == "add") {
                            item.thumb_up_ed = 1;
                            item.good_count++;
							that.good_text="己赞";
                            //点赞头像减加一个
                            // goodLists.push(user);
                        } else {
                            item.thumb_up_ed = 0;
                            item.good_count--;
							that.good_text="点赞";
                           
                        }
               
                    });
                },
		   loadComment: function(reload=0) {
                    //评论列表
                    var _this = this;
					if(reload==1){
						this.loading =0;
						this.lastpage =0;
						this.page =1;
						this.commentList=[];
					}
					if(this.loading==1 || _this.lastpage==1){
						return;
					}
					
					this.loading=1;
                    beeApp.api("sns/comment/get", {
                        pid: this.topid_id,
                        page: this.page,
                        limit: 20,
						order:'id desc'
                    }, function(res) {
						_this.loading=0;
                        if (res.code != 200) {
                            beeApp.alert(res.msg);
                            return;
                        }
                       
                        if (res.data.list.length === 0) {
                            _this.lastpage = 1;
                        }
                        _this.commentList = _this.commentList.concat(res.data.list);
                        _this.page++;
                    });
                },
				jumpToComment:function(comment_id=0){
					uni.navigateTo({
						url:'/pages/topic/addComment?pid='+this.topid_id+"&comment_id="+comment_id
					})
		 },

		  dovote(e){
			if (this.loading==1){
			  return false;
			}
			this.loading = 1;
			var id = e.currentTarget.dataset.id;
			var that = this;
			beeApp.api("sns/topic/vote", {
			  item_id: id,
			  topic_id: this.item.id,
			  method: 'POST'
			}, function (res) {
			  that.loading = 0;
			  //删了出错
			  if (res.code != 200) {
				beeApp.alert(res.msg);
				return false;
			  } 
			  that.fetchData(1);
			});
		  },
				
	   }
		
}
</script>


<style>
	.cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after{ border-bottom: none;}
.options-item .options-title{ float: left ; width: 70%;}
.options-item .options-info{ float: right}
.options-item{ padding: 10upx }
.options-item .options-content{ background: #fff; padding:30upx 10upx; box-sizing: border-box}
.options-line{  background: green; width: 100%; height: 6upx}
.options-title text{color: green;  margin-left:15upx }
.options-item .images{ margin-top: 15upx}
.line{ border-top:1px solid #eee;}
.options-item .images image{ width: 60upx; height: 60upx; border-radius: 50%;  margin-right:10upx; display: inline-block}
</style>
